<template>
  <div class="ol-popup overlayPopup" ref="overlayRef">
    <div class="ol-popup-closer" @click="handleClickCloser"></div>
    <div class="popupContent">
      <h3 class="title">
        <div class="name">
          <p>{{ state.name }}</p>
          <span class="trapezoid" style="right: -6px"></span>
          <span class="trapezoid" style="right: -11px"></span>
          <span class="trapezoid" style="right: -16px"></span>
          <span class="trapezoid" style="right: -21px"></span>
        </div>
      </h3>

      <span style="padding-left: 14px" class="time" v-if="state.monitorData?.tm">
        数据接收时间： {{ dayjs(state.monitorData?.tm).format('YYYY-MM-DD HH:mm') }}
      </span>

      <!-- 水库 -->
      <ul class="list" v-if="state.sttp === 'RR'">
        <li class="listItem">
          <p>水位</p>
          <h3 :class="{isOut: formatIsOut(state.monitorData?.zOut)}">
            <strong>{{ state.monitorData?.waterLevel || '--' }} m</strong>
            <span v-html="formatIsTrend(state.monitorData?.zwptn)"></span>
          </h3>
        </li>
        <li class="listItem">
          <p>汛限水位</p>
          <h3 :class="{isOut: formatIsOut(state.monitorData?.zOut)}">
            <strong>{{ state.monitorData?.xxLevel || '--' }} m</strong>
            <span v-html="formatIsTrend(state.monitorData?.zwptn)"></span>
          </h3>
        </li>
        <li class="listItem">
          <p>当前降雨量</p>
          <h3 :class="{isOut: formatIsOut(state.monitorData?.pOut)}">
            <strong>{{ state.monitorData.currentRainVal != null ? state.monitorData.currentRainVal : '--' }} mm</strong>
            <span v-html="formatIsTrend(state.monitorData?.pTrend)"></span>
          </h3>
        </li>

        <!-- <li class="listItem">
          <p>流量</p>
          <h3 :class="{isOut: formatIsOut(state.monitorData?.qOut)}">
            <strong>{{ state.monitorData?.q || '--' }} m³/s</strong>
            <span v-html="formatIsTrend(state.monitorData?.qTrend)"></span>
          </h3>
        </li> -->
      </ul>
      <!-- 雨量站 -->
      <ul class="list" v-if="state.sttp === 'PP'">
        <!-- <li class="listItem">
          <p>分钟降雨量</p>
          <h3 :class="{isOut: formatIsOut(state.monitorData?.pOut)}">
            <strong>{{ state.monitorData.pm != null ? state.monitorData.pm : '--' }} mm</strong>
            <span v-html="formatIsTrend(state.monitorData?.pTrend)"></span>
          </h3>
        </li> -->
        <li class="listItem">
          <p>小时降雨量</p>
          <h3 :class="{isOut: formatIsOut(state.monitorData?.pOut)}">
            <strong>{{ state.monitorData.ph != null ? state.monitorData.ph : '--' }} mm</strong>
          </h3>
        </li>
        <li class="listItem">
          <p>日降雨量</p>
          <h3 :class="{isOut: formatIsOut(state.monitorData?.dypOut)}">
            <strong>{{ state.monitorData.pd != null ? state.monitorData.pd : '--' }} mm</strong>
          </h3>
        </li>
      </ul>
      <span style="padding-left: 14px" class="time" :class="getStatusClass()">
        设备状态： {{ getDeviceStatus() }}
      </span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, nextTick, onMounted } from 'vue';
import { getGlobalMap } from '@/components/GlobalMap';
import Overlay from 'ol/Overlay';
import dayjs from 'dayjs';

const overlayRef = ref<HTMLDivElement | null>(null);
const state = reactive({
  overlay: null,
  name: '',
  sttp: '',
  intervalId: null,
  monitorData: {},
});

const props = defineProps({
  globalMap: { type: Object },
  stationData: { type: Array },
});

watch(
  () => props.stationData,
  (val) => {
    if (val?.length > 0) {
      clear();
      setOverlayPopupContent(val);
    }
  },
  { deep: true }
);

// 获取设备状态 - 修改为24小时判断逻辑
const getDeviceStatus = () => {
  if (!state.monitorData?.tm) {
    return '离线';
  }

  const monitorTime = dayjs(state.monitorData.tm);
  const now = dayjs();

  // 如果监测时间小于当前时间24小时以上，则显示离线
  if (now.diff(monitorTime, 'hour') >= 24) {
    return '离线';
  } else {
    return '在线';
  }
};

// 获取状态样式类 - 修改为24小时判断逻辑
const getStatusClass = () => {
  if (!state.monitorData?.tm) {
    return 'offline';
  }

  const monitorTime = dayjs(state.monitorData.tm);
  const now = dayjs();

  // 如果监测时间小于当前时间24小时以上，则显示红色
  if (now.diff(monitorTime, 'hour') >= 24) {
    return 'offline';
  } else {
    return 'online';
  }
};

const formatIsTrend = (data) => {
  if (!data) { return '' }
  let showText = ''
  let classStyle = ''
  if (Number(data) === 2) {
    showText = '↓'
    classStyle = 'greenText'
  } else if (Number(data) === 1) {
    showText = '↑'
    classStyle = 'redText'
  } else {
    showText = 'ㅡ'
    classStyle = 'blueText'
  }
  return `<span class=${classStyle}>${showText}</span>`
}

const formatIsOut = (data) => {
  let isOut = false
  if (data && Number(data) === 0) { isOut = true }
  return isOut;
}

function clear() {
  clearInterval(state.intervalId); //清除计时器
  state.intervalId = null; //设置为null
}

function setOverlayPopupContent(pickFeaturesData) {
  for (let i = 0; i < pickFeaturesData.length; i++) {
    // 设置 Overlay的坐标位置
    let coordinates;
    if (pickFeaturesData[0].LGTD) {
      coordinates = [pickFeaturesData[0].LGTD, pickFeaturesData[0].LTTD];
    } else if (pickFeaturesData[0].lgtd) {
      coordinates = [pickFeaturesData[0].lgtd, pickFeaturesData[0].lttd];
    } else {
      coordinates = pickFeaturesData[0].geometry.getCoordinates();
    }
    let name = '';
    if (pickFeaturesData[0].stnm) {
      name = pickFeaturesData[0].stnm;
    } else if (pickFeaturesData[0].name) {
      name = pickFeaturesData[0].name;
    } else {
      name = '';
    }
    state.name = name;

    state.monitorData = pickFeaturesData[0]?.monitorData || pickFeaturesData[0];
    state.sttp = pickFeaturesData[0].sttp;
    let numArray = coordinates.map(parseFloat);
    state.overlay?.setPosition(numArray);
  }
}

function initOverlay() {
  const olMap = getGlobalMap();
  const overlay = new Overlay({
    id: 'OverlayPopup',
    element: overlayRef.value,
    autoPan: false,
  });
  state.overlay = overlay;
  olMap.addOverlay(overlay);
}

function handleClickCloser() {
  state.overlay.setPosition(undefined);
  overlayRef.value.blur();
}

onMounted(async () => {
  await nextTick();
  initOverlay();
});
</script>

<style lang="less" rel="stylesheet/less" scoped>
.overlayPopup {
  width: auto !important;
  @keyframes turn {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  bottom: 17px;
  left: -48px;
  border: none;
  border-radius: 6px;
  box-shadow: 0px 0px 10px 0px rgba(29, 159, 107, 0.3);
  padding: 0;

  .ol-popup-closer {
    width: 18px;
    height: 18px;
    top: 6px;
    right: 4px;
  }

  .ol-popup-closer:after {
    font-size: 16px;
    color: #1b9b68;
  }

  .popupContent {
    width: 100%;
    height: 100%;
    position: relative;
    h3.title {
      display: flex;
      align-items: center;
      min-width: 240px;
      margin-bottom: 6px;
      border-radius: 6px 0 0 0;
      overflow: hidden;
      .name {
        min-width: 60%;
        height: 30px;
        position: relative;
        margin-right: 26px;

        &::before {
          content: '';
          width: 100%;
          height: 100%;
          background: linear-gradient(105deg, #0686ec 0%, #7bc8ff 100%);
          clip-path: polygon(0% 0%, 100% 0%, calc(100% - 15px) 100%, 0% 100%);
          position: absolute;
        }

        p {
          height: 100%;
          padding: 0 20px 0 10px;
          white-space: nowrap;
          display: flex;
          align-items: center;
          color: #fff;
          position: relative;
          z-index: 10;
        }

        .trapezoid {
          position: absolute;
          top: 0;
          right: -6px;
          width: 18px;
          height: 100%;
          background: #7bc8ff;
          clip-path: polygon(84% 0%, 100% 0%, 18% 100%, 0% 100%);
        }
      }

      span.time {
        display: flex;
        padding-left: 10px;
        align-items: center;
        white-space: nowrap;
        margin-right: 16px;
        padding-top: 6px;
      }
    }

    ul.list {
      display: flex;
      flex-direction: column;
      padding: 0 14px 6px 14px;

      li.listItem {
        display: flex;
        align-items: center;
        height: 30px;

        p {
          min-width: 80px;
          white-space:nowrap;
        }

        strong {
          display: inline-block;
          font-size: 12px;
          color: #0686ec;
          transform: scale(1, 1.4);
          margin-right: 8px;
        }

        ::v-deep(.greenText) {
          color: green !important;
        }
        ::v-deep(.redText) {
          color: red !important;
        }
        ::v-deep(.blueText) {
          display: inline-block;
          color: #0070ff !important;
        }

        .fanList {
          display: flex;
          align-items: center;
        }

        .fan2 {
          width: 18px;
          height: 18px;
          display: inline-block;
          background: url(../../../assets/images/fan.png) no-repeat;
          background-size: 100% 100%;
          margin-right: 8px;
        }

        .fan,
        .fan1 {
          width: 18px;
          height: 18px;
          display: inline-block;
          background: url(../../../assets/images/fan.png) no-repeat;
          background-size: 100% 100%;
          margin-right: 8px;
        }

        .fan1 {
          background: url(../../../assets/images/fan1.png) no-repeat;
          background-size: 100% 100%;
        }

        .fan {
          animation: turn 1.4s linear infinite;
        }
      }
    }

    // 在线状态样式
    .online {
      color: #1b9b68 !important;
    }

    // 离线状态样式
    .offline {
      color: red !important;
    }
  }

  .isOut {
    color: red !important;
    strong {
      color: red !important;
    }
  }
}
</style>
